/**
 * zhj
 */
import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TextInput,
    Dimensions,
    Button,
} from 'react-native';
const width = Dimensions.get('window').width;

/**
 * width:宽度（非必填）
 * height:高度(必填)
 * maxEms:最多输入字数（非必填）
 * hintText：占位字符（非必填）
 * fixedHeight 高度是否固定（默认不固定）
 * hideTextNum 隐藏字数提示（默认有）
 * backgroundColor (默认浅灰色)
 * onChange 文字变化时调用
 *fontSize
 *
 */
export default class MyTextInput extends Component{
    constructor(props){
        super(props);
        this.state={
            text:'',
            textNum:0,
            height:0
        }
    }
    _onContentSizeChange(event) {
        this.setState({
            height: event.nativeEvent.contentSize.height,
        });

    }
    render(){
        return(
            <View style={[this.props.style,{width:this.props.width?this.props.width:width-30,height:this.props.fixedHeight?this.props.height:Math.max(this.state.height,this.props.height),backgroundColor:this.props.backgroundColor?this.props.backgroundColor:'#f2f2f2'}]}>
            <TextInput style={{width:width-30,height:Math.max(this.state.height,this.props.height),fontSize:this.props.fontSize?this.props.fontSize:14}}
                       onChangeText={(text) => this.setState({text:text})}
                       value={this.state.text}
                       placeholder={this.props.hintText?this.props.hintText:null}
                       placeholderTextColor='#999999'
                       multiline={true}
                       maxLength={this.props.maxEms?this.props.maxEms:null}
                       returnKeyType='done'
                       onChange={(event)=>{
                           this.setState({textNum:event.nativeEvent.text.length})
                           if (this.props.onChange)
                             this.props.onChange(event)

                       }}
                       onEndEditing={(event)=>{
                           if (this.props.onEndEditing) {
                               this.props.onEndEditing(event)
                           }
                       }}
                       onSubmitEditing={(event)=>{}}
                       underlineColorAndroid='transparent'
                       onContentSizeChange={this._onContentSizeChange.bind(this)}
            >
            </TextInput>
                <Text style={{position:'absolute',bottom:10,right:10,fontSize:10,color:'#999999'}}>
                    {this.props.hideTextNum?null:this.props.maxEms?this.state.textNum+'/'+this.props.maxEms:null}
                </Text>
            </View>
        );
    };

}